<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import formAssembly from '@/components/queryTable/form/index.vue'
import tableAssembly from '@/components/queryTable/table/index.vue'
import { formItem } from '../../form-item'
import { WtjListQueryResult } from '@/api/gdgl-dto'
import { TableItem } from '@/api/common'
import router from '@/router/index'
import gdglService from '@/api/gdgl'
import xzajDialog from '../../dialogs/xzaj-dialog.vue'
import ewmDialog from '../../dialogs/ewm-dialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableBoxRef = ref<InstanceType<typeof tableAssembly>>()
const xzajDialogRef = ref<InstanceType<typeof xzajDialog>>()

defineProps({
  optionsObj: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['refresh'])
// 生命周期
onMounted(async () => {
  loading.value = true
  formLabel.value = await formItem('dgdWtj')
  loading.value = false
  // 分页
  changePageNum(1)
})

// loading
const loading = ref<boolean>(false)

// 更多条件查询 入参
const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    ajmc: '', // 案件名称
    bmsah: '', //部门受案号
    tysah: '', //统一受案号
    ajlbbms: undefined, //案件类别编码
    cbbmbms: [], //承办部门编码
    cbr: '', //承办人
    ajlxbm: '', //案卷类型编码
    jcztbm: '', //检测状态编码
    sfzzajdm: '', //是否存在纸质案卷编码
    sfyspdm: '', //是否存在音视频编码
    gdztbm: '', //归档状态编码
    yjztbm: '', //预警状态编码
    ajbjksrq: '', //案件办结开始日期
    ajbjjsrq: '', //案件办结结束日期
  },
})

// 更多条件查询
const formLabel = ref()

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 200,
      custom: true,
      sort: true,
      dqfs: 'left',
    },
    { label: '部门受案号', prop: 'bmsah', width: 300, dqfs: 'left' },
    { label: '统一受案号', prop: 'tysah', width: 200, dqfs: 'left' },
    { label: '案件类别', prop: 'ajlbmc', width: 200, dqfs: 'left' },
    { label: '承办部门', prop: 'cbbmmc', width: 150, dqfs: 'left' },
    { label: '检察官', prop: 'cbjcg', width: 130, dqfs: 'left' },
    { label: '案卷类别', prop: 'ajlx', width: 120, dqfs: 'left' },
    {
      label: '检测状态',
      prop: 'jcztmc',
      width: 120,
      dqfs: 'left',
      jczt: true,
    },
    { label: '归档状态', prop: 'gdztmc', width: 120, dqfs: 'left', gdzt: true },
    { label: '案卷数量', prop: 'ajsl', width: 120, dqfs: 'left' },
    { label: '总页数', prop: 'zys', width: 120, dqfs: 'left' },
    { label: '纸质页数', prop: 'zzys', width: 120, dqfs: 'left' },
    {
      label: '音像',
      prop: 'sxsl',
      width: 120,
      dqfs: 'left',
    },
    { label: '剩余期限', prop: 'syqx', width: 120, dqfs: 'left' },
    { label: '办结日期', prop: 'bjrq', width: 130, dqfs: 'left' },
  ],
})

// 控制更多条件显示隐藏
const moreShow = ref(true)

// 入参
/**
 * @描述: 表格相关
 */
const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
    exportParams: {
      url: `${window.IPCONFIG}/api/gdgl/queryWtjList`,
      wjmc: '案件归档-未提交',
    },
  }
})

/*
 * 获取未提交表格数据
 */
const getWtjTableData = () => {
  const params = form.value
  loading.value = true
  gdglService
    .queryWtjList(params)
    .then((res) => {
      tableData.value.data = res.data.list
      total.value = res.data.total
      emit('refresh')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<WtjListQueryResult[]>([])
const selectionChange = (val: WtjListQueryResult[]) => {
  multipleSelection.value = val
}

/*
 * 打开归档跟踪弹框
 */
const openGdgzDialog = (row: any) => {
  tableBoxRef.value?.openGdgzDialog(row.gdbh)
}

/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any) => {
  const params = { ajbh: row.ajbh }
  gdglService
    .jcajbacy(params)
    .then((res) => {
      if (res.data) {
        router.push({
          path: '/gdzl',
          query: {
            ...row,
            route: '/ajgd',
            jumpFrom: 'wtj',
            isUnlockJudge: true,
          },
        })
      } else {
        ElMessage({ type: 'warning', message: '当前用户不是该案件的办案人员' })
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 点击提交审核按钮
const submitProcess = () => {
  if (multipleSelection.value.some((el) => el.jcztdm !== 'gd0110003')) {
    ElMessage.warning('存在未通过检测的案件，无法提交审核')
    return
  }
  ElMessageBox.confirm('是否提交审核？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      gdxxList: multipleSelection.value.map((el) => {
        return {
          ajbh: el.ajbh,
          bmsah: el.bmsah,
          gdbh: el.gdbh,
        }
      }),
    }
    gdglService
      .createGdsh(params)
      .then(() => {
        ElMessage.success('提交成功')
        // 刷新数据
        getWtjTableData()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

// 点击新增案件按钮打开弹窗
// const openAddCase = () => {
//   xzajDialogRef.value?.openDialog()
// }

/*
 * 打开二维码弹框
 */
const ewmDialogRef = ref<InstanceType<typeof ewmDialog>>()
const openEwmDialog = () => {
  const list = multipleSelection.value.map((el) => ({ ajbh: el.ajbh, bmsah: el.bmsah }))
  ewmDialogRef.value!.openDialog(list)
}

// 子组件传过来的查询方法
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  getWtjTableData()
}

// 页码发生改变时
const changePageNum = (val: number) => {
  form.value.pageNum = val
  getWtjTableData()
}

// 页条数发生改变时
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getWtjTableData()
}

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}

defineExpose({ changePageNum })
</script>

<template>
  <div class="container" v-loading="loading">
    <div class="form">
      <formAssembly
        :formData="form.filter"
        :formLabel="formLabel"
        :moreShow="moreShow"
        :optionsObj="optionsObj"
        @searchEvent="searchTable"
      ></formAssembly>
    </div>

    <div class="submit-list">
      <div class="submit-text">
        <span>未提交列表</span>
      </div>
      <div>
        <!-- <button class="btn_operation" @click="openAddCase">
          <div class="btn-addxzaj"></div>
          新增案件
        </button>

        <button class="btn_operation" :disabled="!multipleSelection.length">
          <div class="btn-editxgaj"></div>
          修改案件
        </button>

        <button class="btn_operation" :disabled="!multipleSelection.length">
          <div class="btn-deletescaj"></div>
          删除案件
        </button>

        <button class="btn_operation" :disabled="!multipleSelection.length">
          <div class="btn-scanningjzsm"></div>
          申请集中扫描
        </button> -->
        <button class="btn_operation" @click="openEwmDialog" :disabled="!multipleSelection.length">
          <div class="btn-scanningjzsm"></div>
          案件二维码
        </button>
        <button class="btn_operation" :disabled="!multipleSelection.length" @click="submitProcess">
          <div class="btn-submitjtsh"></div>
          提交审核
        </button>

        <!-- <el-popover placement="bottom" :width="100" trigger="hover">
          <ul class="export-excel">
            <li>查询结果</li>
            <li>全部记录</li>
          </ul>
          <template #reference>
            <button class="btn_operation" @click="downLoadFile">导出EXCEL</button>
          </template>
        </el-popover> -->
        <button class="btn_operation" @click="changePageNum(1)">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
    </div>
    <div class="table">
      <tableAssembly
        gnbm="ajgd-wtj"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="true"
        :showExport="true"
        :getTableDataParam="page"
        :formParams="form"
        @selectionChange="selectionChange"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
        @checkRow="checkRow"
        @rowClick="rowClick"
      >
        <template #myAction>
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
              <div class="active-img" title="归档跟踪" @click="openGdgzDialog(scope.row)">
                <img src="@/assets/images/gdgztext.png" />
              </div>
            </template>
          </el-table-column>
        </template>
      </tableAssembly>
    </div>
    <!-- 新增案件弹窗 -->
    <xzajDialog ref="xzajDialogRef" :treeData="[]"></xzajDialog>
    <!--案件二维码-->
    <ewm-dialog ref="ewmDialogRef" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.form {
  padding: 10px 0 0 0;
}

.submit-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;

  .submit-text {
    height: 16px;
    line-height: 16px;
    margin-right: auto;
    color: #526a89;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: flex-end;

    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background-color: #006cff;
      margin-right: 6px;
    }
  }
}
.active-img {
  cursor: pointer;
  float: left;
}
.active-img + .active-img {
  margin-left: 10px;
}

.table {
  flex: 1;
  flex-shrink: 0;
  overflow: auto;
}

.export-excel {
  li {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    &:hover {
      background-color: #ecf5ff;
      color: #266df5;
    }
  }
}
</style>
